<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="公共配置" name="1">
        <!--公共属性-->
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">宽度</span>
            <el-input-number v-model="widget.UI.data.itemSize.width" placeholder="按钮高度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">高度</span>
            <el-input-number v-model="widget.UI.data.itemSize.height" placeholder="按钮高度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">水平间距</span>
            <el-input-number v-model="widget.UI.data.itemSpace.mainAxisSpace" placeholder="水平间距" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">垂直间距</span>
            <el-input-number v-model="widget.UI.data.itemSpace.crossAxisSpace" placeholder="垂直间距" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">对齐方式</span>
            <el-select v-model="widget.UI.data.align" size="mini" class="width-100">
              <el-option label="左对齐" value="left"></el-option>
              <el-option label="居中" value="center"></el-option>
              <el-option label="右对齐" value="right"></el-option>
            </el-select>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">选择图片</span>
            <el-select v-model="widget.UI.data.itemData.displayImage" size="mini" class="width-100">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </div>
          <el-row :gutter="10" :span="24" v-if="!widget.UI.data.itemData.displayImage">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">文字颜色</span>
                <PopoverColor :colorValue="widget.UI.data.itemData.color">
                  <CustomColorPicker v-model="widget.UI.data.itemData.color" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中颜色</span>
                <PopoverColor :colorValue="widget.UI.data.itemData.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.itemData.activeColor" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">底色</span>
                <PopoverColor :colorValue="widget.UI.data.itemData.backGroundColor">
                  <CustomColorPicker v-model="widget.UI.data.itemData.backGroundColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中底色</span>
                <PopoverColor :colorValue="widget.UI.data.itemData.activeBackGroundColor">
                  <CustomColorPicker v-model="widget.UI.data.itemData.activeBackGroundColor" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="flex-com mar-btm">
                <span class="label-title">文字大小</span>
                <el-input-number v-model="widget.UI.data.itemData.textSize" placeholder="文字大小" size="mini"
                                 class="width-100" :min="0"></el-input-number>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="flex-com mar-btm">
                <span class="label-title">图标大小</span>
                <el-input-number v-model="widget.UI.data.itemData.iconSize" placeholder="图标大小" size="mini"
                                 class="width-100" :min="0"></el-input-number>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="flex-com mar-btm">
                <span class="label-title">圆角大小</span>
                <el-input-number v-model="widget.UI.data.itemData.radius" placeholder="圆角大小" size="mini"
                                 class="width-100" :min="0"></el-input-number>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="按钮配置" name="2">
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, idx) in widget.UI.data.items" :key="item.id">
            <div>
              <div class="flex-com mar-btm" v-show="!widget.UI.data.itemData.displayImage">
                <span class="label-title">输入名称{{idx + 1}}</span>
                <el-input v-model="item.text" type="textarea" :rows="2"
                          placeholder="输入名称" size="mini"
                ></el-input>
                <span
                  class="el-icon-delete cursor-pointer font-hover-danger"
                  @click="deleteButton(item.text, idx)"></span>
              </div>

              <div class="flex-com mar-btm"  v-show="!widget.UI.data.itemData.displayImage">
                <span class="label-title">选择图标{{idx + 1}}</span>
                <el-popover width="300" trigger="click" popper-class="custom-popover">
                  <div slot="reference" class="display-inline-block cursor-pointer">
                    <i v-if="item.icon" :class="backgroundIconClass(item.icon)"
                       class="iconfont font-size-20"></i>
                    <el-button v-else type="text" size="small">选择</el-button>
                  </div>
                  <div class="pad-all-5">
                    <IconPicker v-model="item.icon"></IconPicker>
                  </div>
                </el-popover>
              </div>
              <div class="flex-com mar-btm"  v-show="widget.UI.data.itemData.displayImage">
                <span class="label-title">背景图片{{idx + 1}}</span>
                <el-popover width="300" trigger="click" popper-class="custom-popover">
                  <div slot="reference" class="default-image-container">
                    <el-image :src="`${assetBaseUrl}/file/download/${item.backgroundImage}`" class="default-image-value">
                      <div slot="error">
                        <span style="color:#2D69E0">请选择</span>
                      </div>
                    </el-image>
                  </div>
                  <div class="pad-all">
                    <ImagePicker v-model="item.backgroundImage"></ImagePicker>
                  </div>
                </el-popover>
                <span class="el-icon-delete cursor-pointer" @click="item.backgroundImage=null"></span>
              </div>
              <div class="flex-com"  v-show="widget.UI.data.itemData.displayImage">
                <span class="label-title">选中的背景图片{{idx + 1}}</span>
                <el-popover width="300" trigger="click" popper-class="custom-popover">
                  <div slot="reference" class="default-image-container">
                    <el-image :src="`${assetBaseUrl}/file/download/${item.activeBackgroundImage}`" class="default-image-value">
                      <div slot="error">
                        <span style="color:#2D69E0">请选择</span>
                      </div>
                    </el-image>
                  </div>
                  <div class="pad-all">
                    <ImagePicker v-model="item.activeBackgroundImage"></ImagePicker>
                  </div>
                </el-popover>
                <span class="el-icon-delete cursor-pointer" @click="item.activeBackgroundImage=null"></span>
              </div>
              <div class="divider"></div>
            </div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addButton">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加按钮</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>>
<script>
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import {WidgetButtonList} from "@/modules/IDE/widget/atom/widgetButtonList";
  import ImagePicker from "@/components/IDE/ImagePicker";
  import {assetBaseUrl} from "@/config/env";
  import {confirmHandle} from "@/utils";
  import iconfont from "@/assets/font/iconfont.json";
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';
  import IconPicker from "@/components/IDE/IconPicker";

  export default {
    name: 'ButtonListSpec',
    components: {
      CustomColorPicker, ImagePicker, PopoverColor, IconPicker
    },
    props: {
      widget: {
        type: WidgetButtonList,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        activeNames: ['1'],
        assetBaseUrl: assetBaseUrl
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },

    },
    methods: {
      addButton() {
        this.widget.UI.data.items.push({
          text: `按钮${this.widget.UI.data.items.length + 1}`,
          icon: '',
          backgroundImage:'',
          activeBackgroundImage:""
        });
        this.commonHandle('add')
      },
      deleteButton(name, idx) {
        confirmHandle({label: `确定要删除 ${name} 吗?`}).then(() => {
          this.widget.UI.data.items.splice(idx, 1)
          this.commonHandle('delete', idx)
        }).catch(() => {
        });
      },
      commonHandle(type, index) {
        let state = {
          operator: "=",
          value1: {
            atomic: this.widget.id,
            atomicPorts: "selectedIndex",
            key: "",
            name: "组件属性：按钮组的选中的按钮",
            portsType: "int",
            type: "relatedAtomic",
            value: `${this.widget.id}.selectedIndex`
          },
          value2: {
            autoType: 0,
            isCondition: true,
            key: "",
            name: "",
            type: "int",
            value: this.widget.UI.data.items.length
          }
        }
        const events = this.widget.ports.events.find(obj => obj.eventType === 'valueChange');
        const action = events.action.find(obj => obj.type === 'iftttLogicList');
        if (!action) return
        if (type === 'add') {
          action.value.actions[0].value.conditions.push(state)
        } else {
          action.value.actions[0].value.conditions.splice(index, 1)
        }
      },
      backgroundIconClass(val) {
        const {font_class = ''} = iconfont.glyphs.find(icon => {
          return icon.unicode === val;
        }) || {};
        return `icon-${font_class}`;
      },
    }
  }
</script>
<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 65px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
  .align-start {
    align-items: flex-start;
  }

  .default-image-container {
    display: inline-block;
    cursor: pointer;

    .default-image-value {
      width: 60px;
      max-height: 60px;
    }
  }
</style>
